<template>
    <div id="productTopArea" >
        <div id="productTopArea_text">
           <div>
                <div id="productTopArea_text-title">
                    数信淘客
                </div>
                <div  class="font-size">
                    人工智能和大数据时代下的财务反欺诈和风险分析平台
                </div>
           </div>
        </div>
       
        <div id="bottom">
            <div>
                <div class="mouse mouse_hover"  @click="$store.commit('jumpURL', '立即试用云产品')">立即试用产品云</div>
                <div class="mouse mouse_hover" @click="$store.commit('jumpURL', 'API接入')">API接入</div>
                <div class="mouse mouse_hover" @click="$store.commit('jumpURL', '本地部署方案')">本地部署方案</div>
            </div>
        </div>
       
    </div>
</template>

<script>

export default {
    name: 'productTopArea',
    dec: '产品顶端区域',

    data () {
        return {
            W: 0,//innerWidth + 'px',
            H: 0,//innerHeight + 'px',
            interval: null
  
        }
    },
     mounted() {
        
       
     },
     methods: {
  
        
     },
    
}
</script>
<style lang="less">
        @import url('../../../../main.less');

#productTopArea{
   position: relative;
    //   width: 19.20rem;
      height: 7rem;
      background: url('/static/img/mk.jpg') no-repeat;
      background-size: 100% 100%;
    
      overflow: hidden;
   #productTopArea_text{
       position: absolute;
    
       width: 100%;
    
       left: 0;
       top: 0;
       z-index: 12;
       text-align: center;
       font-size: 0.67rem;
       color: #ffffff;
      
       margin-top:2.55rem;
    //    padding: 0 3.65rem;
        

       box-sizing: border-box;
       >div{
                width: @w;
              margin: 0 auto;
       }
       .font-size{
           font-size: 0.3rem;
       }
       >div > div:nth-child(2){
           margin-top: 0.17rem;
       }
       >div > div:nth-child(3){
           margin-top: 0.22rem;
           
       }
   }

   #bottom{
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       background: rgba(0,0,0, 0.1);
      
       >div{
         width: @w;
         font-size: 0.34rem;
         color: #fff;
         display: flex;
         margin: 0 auto;
         justify-content: space-between;
         height: 1.56rem;
         align-items: center;
        
         >div{
             width:2.58rem;
            height: 0.87rem;
            border-radius: 0.06rem;
            border: 0.01rem solid rgba(255,255,255,1);
            line-height: 0.87rem;
            text-align: center;
            font-size: 0.24rem;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
         }
       }
   }
   

}
       
</style>